<template>
	<view class="content">
		<view class="safeContent">
			<topCom>{{title}}</topCom>
		</view>
		<view class="num">
			+1120<span>KOI</span>
		</view>
		<view class="status">
			<img src="../../static/images/Home/done.png" alt="">
			<span>转入成功</span>
		</view>
		<view class="tradeInfo boxs">
			<view class="item">
				<view class="typeName">交易时间</view>
				<view class="val">2023年10月10日 21:19:28</view>
			</view>
			<view class="item">
				<view class="typeName">支出数量</view>
				<view class="val">12481 USDT</view>
			</view>
			<view class="item">
				<view class="typeName">交易类型</view>
				<view class="val">收购KOI</view>
			</view>
			<view class="item">
				<view class="typeName">交易方式</view>
				<view class="val">转入</view>
			</view>
		</view>
		<view class="tradeNumber boxs">
			<view class="item">
				<view class="typeName">交易单号</view>
				<view class="val">{{tradeNumber}} <img @click='cope()' src="../../static/images/Home/btn-copy.png"
						alt="copy"></view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import topCom from '../topCom/index.vue'
	import { ref } from 'vue'
	const title = ref('详情')
	const tradeNumber = ref(1685165181651681651)
	function cope() {
		document.execCommand('1685165181651681651')
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;

		.num {
			margin-top: 72px;
			height: 90px;
			font-size: 64px;
			font-family: PingFangSC, PingFang SC;
			text-align: center;
			color: #FFFFFF;
			line-height: 90px;
			letter-spacing: 2px;

			span {
				font-size: 32px;
			}
		}

		.status {
			margin-top: 8px;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			justify-content: center;
			height: 45px;
			font-size: 32px;
			font-family: PingFangSC, PingFang SC;
			color: #FFFFFF;
			line-height: 45px;
			letter-spacing: 1px;

			img {
				width: 32px;
				height: 32px;
				margin-right: 16px;
			}
		}

		.boxs {
			margin: 0 auto;
			margin-top: 32px;
			width: 686px;
			padding-left: 32px;
			padding-right: 32px;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 16px;
		}

		.tradeInfo {
			margin-top: 72px;
		}

		.item {
			height: 80px;
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;

			.typeName {
				font-size: 24px;
				font-family: PingFangSC, PingFang SC;
				color: #FFFFFF;
				line-height: 80px;
			}

			.val {
				font-size: 24px;
				font-family: PingFangSC, PingFang SC;
				color: #FFFFFF;
				line-height: 80px;
				opacity: 0.4;

				img {
					width: 30px;
					height: 30px;
				}
			}
		}
	}
</style>